﻿@{
    Layout = null;
}
@using HiLand.General.Entity
@model List<SimpleProductEntity>
<script src="@Url.Content("~/Scripts/jquery.jcarousel.min.js")" type="text/javascript"></script>
@*<link href="@Url.Content("~/Content/jcarouselSkins/tango/skin.css")" rel="stylesheet" type="text/css" />*@
<div style="display: block;" id="productScroller">
    <div id="wrap">
        <div class=" jcarousel-skin-tango">
            <div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal">
                <div style="position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
                    <ul style="display: block; overflow: hidden; position: relative; top: 0px; margin: 0px;
                        padding: 0px;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
                        @for (int i = 0; i < Model.Count; i++)
                        {
                            SimpleProductEntity currentProduct = Model[i];
                            string productImageUrl = Url.Content("~/Content/Images/NoImage_180_135.jpg");
                            if (currentProduct.ProductMainImage != null)
                            {
                                string thumbnailUrl = currentProduct.ProductMainImage.EnsureThumbnailAllVirtualPath(180, 135);
                                if (string.IsNullOrWhiteSpace(thumbnailUrl) == false)
                                {
                                    productImageUrl = thumbnailUrl;
                                }
                            }

                            string productUrl = Url.Action("ProductDetails", "Product", new { productGuid = currentProduct.ProductGuid });
                            
                            <li jcarouselindex="@i +1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
                                @{Html.RenderAction("_ProductItemSmallFeature", "Product", new { productGuid = currentProduct.ProductGuid });}
                            </li>
                        }
                    </ul>
                </div>
                <div style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal">
                </div>
                <div style="display: block;" class="jcarousel-next jcarousel-next-horizontal">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel();

        $(".btnDetails").click(function () {
            var itemGuid = $(this).attr("itemGuid");
            var baseUrl= '@Url.Action("ProductDetails","Product")';
            var targetUrl = $.UrlUtil(baseUrl).concat("productGuid", itemGuid).show();
            window.location = targetUrl;
        });
    });


</script>
